<div ng-include src="'views/sidebar.html'"></div>
<section id="page-wrapper">
  <form class="form-inline">
    <div class="form-group">
      <div class="btn-group" role="group" aria-label="..." style="margin:10px;">
        <img src="images/laptop.png" ng-class="{false: 'btn btn-default', true: 'btn btn-primary'}[pageType==0]" ng-click="changeClass(0)" style="width:50px"title="查看PC">
        <img src="images/phone.png" ng-class="{false: 'btn btn-default', true: 'btn btn-primary'}[pageType==1]" ng-click="changeClass(1)" style="width:50px"title="查看H5">
        <!-- <img src="images/app.png" ng-class="{false: 'btn btn-default', true: 'btn btn-primary'}[pageType==2]" ng-click="changeClass(2)" style="width:50px"title="查看APP"> -->
      </div>
    </div>
  </form>
  <form class="form-horizontal">
    <div class="modal-header" style="position:relative;">
      <h1 class="modal-title">模块信息</h1>
      <a class="btn btn-success" ng-click="moduleDataInfo(null, $event, false)" tabindex="0" style="position: absolute;top: 10px;right: 10px;"><i class="fa fa-plus"></i>添加</a>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <ul class="row">
          <li ng-repeat="module in moduleLists" class="list-unstyled col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                  <div class="btn-group pull-right" role="group" aria-label="...">
                    <button ng-click="moduleEdit(module)" class="btn btn-default btn-xs">
                      <i class="fa fa-sign-in"></i>
                    </button>
                    <button ng-click="moduleDataInfo(module, $event, true)" class="btn btn-default btn-xs">
                    <i class="fa fa-edit"></i>
                    </button>
                  </div>
                  <div class="panel-title">{{module.description}}({{module.moduleName}})</div>
                 <div class="panel-title">CSS:{{module.cssMd5}}</div>
                  <div class="panel-title">JS:{{module.jsMd5}}</div>
                </div>
                <div class="panel-body">
                  <a href="#" class="thumbnail"  ng-click="moduleDataInfo(module, $event, true)">
                    <img style="height:120px;" ng-src="{{module.picUrl}}">
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
  </form>
</div>
</section>
<script type="text/ng-template" id="modal.module.info.html">
  <input type="file" style="display:none;" id="fileuploader" />
  <style>.ace_editor { height: 200px; }</style>
  <form class="form-horizontal" name="myForm">
    <div class="modal-header">
      <h3 class="modal-title">模块详情</h3>
    </div>
    <div class="modal-body">
      <div class="form-group" ng-if="isEdit == false">
        <label class="col-sm-2 control-label">模块类型</label>
          <div class="col-sm-10">
           <select class="form-control" ng-model="module.moduleType">
            <option value="0" label="PC"></option>
            <option value="1" label="H5"></option>
            <!-- <option value="2" label="APP"></option> -->
          </select>
          </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">模块名称</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" ng-model="module.moduleName" ng-readonly="{{isEdit}}">
          </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">模块分类</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" ng-model="module.categoryName">
          </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">模块描述</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" ng-model="module.description">
          </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">模块缩图</label>
          <div class="col-sm-10">
            <div class="input-group">
              <input type="text" class="form-control" ng-model="module.picUrl">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="changeFile(module)" tabindex="0">
                <i class="glyphicon glyphicon-folder-open"></i>
                </button>
                <button type="button" class="btn btn-success" type="button" tabindex="0" ng-if="module.isCompleted == true">
                <i class="glyphicon glyphicon-ok"></i>
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">CSS</label>
          <div class="col-sm-10">
            <div ui-ace="{
              useWrapMode : true,
              showGutter: false,
              theme:'twilight',
              mode: 'css',
              firstLineNumber: 5,
              onLoad: loaded,
              onChange: changed
              }" ng-model="module.defaultCss">
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">JS</label>
          <div class="col-sm-10">
            <div ui-ace="{
              useWrapMode : true,
              showGutter: false,
              theme:'twilight',
              mode: 'javascript',
              firstLineNumber: 5,
              onLoad: loaded,
              onChange: changed
              }" ng-model="module.defaultJs">
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">VM</label>
          <div class="col-sm-10">
            <div ui-ace="{
              useWrapMode : true,
              showGutter: false,
              theme:'twilight',
              mode: 'html',
              firstLineNumber: 5,
              onLoad: loaded,
              onChange: changed
              }" ng-model="module.moduleDefinition">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-if="isEdit == true" ng-click="save(module)" type="submit">修改</button>
        <button class="btn btn-success" ng-if="isEdit == false" ng-click="add(module)" type="submit">添加</button>
        <button class="btn btn-default" ng-click="cancel()">取消</button>
      </div>
    </div>
  </form>
</script>
